<template>
	<view class="content container">
		<u-form :model="form" :rules="rules" ref="uForm" >
			<!-- 旧手机 -->
			<u-form-item class="code" prop="phone" v-if="!isShow">
				<u-input type="text" placeholder="请输入旧手机号码" v-model="form.phone" clearable style="height:90rpx">
				</u-input>
			</u-form-item>
			<u-form-item class="code" prop="newPhone" v-if="isShow">
				<u-input type="text" placeholder="请输入新手机号码" v-model="form.newPhone" clearable style="height:90rpx">
				</u-input>
			</u-form-item>
			<u-form-item class="code mb-60" prop="code">
				<u-input placeholder="请输入验证码" v-model="form.code" clearable style="height:90rpx;width: 70%;">
				</u-input>
				<u-verification-code :seconds="seconds" end-text="重新获取验证码" ref="uCode" @change="codeChange">
				</u-verification-code>
				<span class="get-code" @tap="getCode">{{tips}}</span>
			</u-form-item>
			<!-- 通栏按钮 -->
			<u-button @click="submit(0)" v-if="!isShow" :custom-style="buttonStyle" shape="circle" hover-class="none">下一步</u-button>
			<!-- 确认修改手机号 -->
			<u-button @click="submit(1)" v-if="isShow" :custom-style="buttonStyle" shape="circle" hover-class="none">完成</u-button>
		</u-form>
	</view>
</template>

<script>
	import {mobile} from "@/utils/RegExp.js";
	import { API } from '@/config/myApi.js';
	export default {
		data() {
			return {
				form: {
					phone: '',
					newPhone:'',
					code:'',
				},
				tips: '',
				seconds: 60,
				isShow:false,
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号码',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						// 正则判断为字母或数字
						{
							pattern:mobile,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '手机号格式不正确',
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							min:1,
							message: '验证码不能为空',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
					
				},
				buttonStyle: {
					width: "100%",
					height: "90rpx",
					fontSize: "32rpx",
					color: "#fff",
					borderRadius: "45rpx",
					backgroundColor: "#F4333C",
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.getCodeHandle()
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
			
					}, 0);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//获取验证码
			getCodeHandle() {
				let pram = {};
				if(!this.isShow){
					pram = {
						mobile: this.form.phone,
						verificationEnums: 'EDIT_MOBILE'
					}
				}else{
					pram = {
						mobile: this.form.newPhone,
						verificationEnums: 'EDIT_MOBILE'
					}
				}
				API.getCodeByPhone(pram.verificationEnums, pram.mobile).then(res => {
					console.log('获取验证码',res)
				})
			},
			submit(num) {
				if(!num){
					this.$refs.uForm.validate(valid => {
						if (valid) {
							let pram = {
								code:this.form.code,
								mobile:this.form.phone
							};
							console.log('参数',pram);
							API.verificationOldPhone(pram).then(res =>{
								console.log('旧手机验证',res);
								if(res.code === 200){
									this.isShow = !this.isShow	
								}else{
									uni.showToast({
										title:res.message,
										icon:"none"
									})
								}
							})
						} else {
							uni.showToast({
								title:"验证失败",
								icon:"none"
							})
							console.log('验证失败');
						}
					});
				}else{
					this.$refs.uForm.validate(valid => {
						if (valid) {
							let pram = {
								code:this.form.code,
								mobile:this.form.newPhone
							};
							console.log('参数',pram);
							API.editPhone(pram).then(res =>{
								console.log('修改新手机',res);
								if(res.code === 200){
									uni.showToast({
										title:"修改手机号成功",
										icon:"none"
									})
								}else{
									uni.showToast({
										title:res.message,
										icon:"none"
									})
								}
							})
						} else {
							console.log('验证失败');
						}
					});
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		background-color: #fff;

		.code {
			// padding: 0;
			border-bottom: 1rpx solid #E3E3E3;
			/deep/.u-input__input {
				min-height: 100rpx !important;
			}
			/deep/.u-form-item__message{
				position: absolute;
				bottom:-34rpx;
				left: -90rpx;
			}
			// 验证码
			.get-code {
				font-size: 26rpx;
				color: #F4333C;
				position: absolute;
				right: 0;
				top: 18rpx;
			}
		}
	}

	
</style>
